import { Meta } from '@storybook/blocks';

import * as PositionedTransitionStories from '../stories/PositionedTransition.stories';

<Meta of={PositionedTransitionStories} />

# PositionedTransition

Animated version of Positioned which takes a specific Animation&#x3C;RelativeRect&#x3E; to transition the child's position from a start position to an end position over the lifetime of the animation.

## Example

```dart liveslice=PositionedTransition height=400px
final RelativeRectTween relativeRectTween = RelativeRectTween(
  begin: RelativeRect.fromLTRB(40, 40, 0, 0),
  end: RelativeRect.fromLTRB(0, 0, 40, 40),
);

AnimationController _controller;

bool _first = true;

initState() {
  _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        color: Colors.blue[50],
        height: 300,
        child: Stack(
          children: <Widget>[
            PositionedTransition(
              rect: relativeRectTween.animate(_controller),
              child: Container(
                child: Container(
                  width: 200,
                  height: 200,
                  padding: EdgeInsets.all(20),
                  child: FlutterLogo(),
                ),
              ),
            ),
          ],
        ),
      ),
      SizedBox(height: 20,),
      FlatButton(
        onPressed: () {
          if (_first) {
            _controller.forward();
          } else {
            _controller.reverse();
          }
          _first = !_first;
        },
        child: Text(
          "CLICK ME!",
        ),
      )
    ],
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html
